<template>
    <div class="sysm-b-modu boxsi ml50 mr50" :style="'height: '+viewHeight+'px;'">
        <div class="sysm-bmodu-box">
            <div class="pl24 pr24 h100p">
                <div class="page-show-box">
                <table cellpadding="0" cellspacing="0" width="100%" class="sysm-bmbox-table">
                    <tbody><tr><td class="pb30" colspan="3"><h3>
                            登记入区事由
                        </h3></td></tr>
                    <tr>
                        <td width="220" rowspan="6" valign="top">
                        </td><td width="144" align="right" class="pr20">人员类型：</td>
                        <td>
                            <template v-for="(item,i) in checkInUserTypes">
                                <input :key="i" type="radio" name="userType"
                                    :id="'userType'+item.dicItemCode" v-model="dataForm.userType" :value="item.dicItemCode"><label :for="'userType'+item.dicItemCode">{{item.dicItemName}}</label>
                            </template>
                        </td>
                    </tr>
                    <tr><td align="right" class="pr20">入区事由：</td>
                        <td>
                        <div class="sysm-bmbtable-down checkInTypeBox">
                            <input type="text" class="max-box"  placeholder="选择入区事由" readonly/>
                            <ul class="sysm-bmbtdown-list" style="top: 42px;">
                                <template v-for="item in checkInTypes">
                                    <li :data="item.dicItemCode" :key="item.dicItemCode">{{item.dicItemName}}</li>
                                </template>
                            </ul>
                        </div>
                        </td>
                    </tr>
                    <tr v-if="dataForm.userType == 10"><td align="right" class="pr20">涉案案由：</td>
                        <td>
                            <div class="sysm-bmbtable-down checkInReasonBox">
                            <input type="text" class="max-box"  placeholder="选择涉案案由" readonly/>
                            <ul class="sysm-bmbtdown-list" style="top: 42px;">
                                <template v-for="item in checkInReasons">
                                    <li :data="item.dicItemCode" :key="item.dicItemCode">{{item.dicItemName}}</li>
                                </template>
                            </ul>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="dataForm.userType == 20"><td align="right" class="pr20">关联疑犯：</td>
                        <td><span class="sysm-brbbom-btn text-obj" v-if="dataForm.takeForUserName.length>0">{{dataForm.takeForUserName}}</span><a href="javascript:;" class="sysm-brbbom-btn table-obj" @click="showUserList()">选择疑犯</a></td>
                    </tr>
                    </tbody></table>
                </div>
                <div class="mt10 text_ac">
                    <a href="javascript:;" class="sysm-brbbom-btn true-obj mt10" @click="doSave()">提交登记</a>
                </div>
            </div>
        </div>

        <zfba-popup-modu :openState="selzfListState" title="选择疑犯" :width="1052" :height="580" @closeFun="selclosePopupFun" @submit="selsubmitPopupFun">
            <ul class="zfba-popup-selbox clearfix">
                <template v-for="(item,i) in userList">
                    <li class="zfba-popup-seluser" :key="i" @click="setUser(item.id,item.loginName)">
                        <div><img :src="item.avatar" height="236" width="168" alt=""></div>
                        <p class="zfba-pseluser-info"><span>{{item.loginName}}</span> 
                        <span class="fr">{{item.sex}}</span></p>
                    </li>
                </template>
            </ul>
        </zfba-popup-modu>

    </div>
</template>

<script>
// import zfbaDateModu from './dateModu'
import zfbaPopupModu from './popupModu'
import {getShowImgPath} from '@/utils'
export default {
    data(){
        return {
            selzfListState : false, //显示选择疑犯弹窗
            viewHeight : 504,
            userState : 2,      //复选框切换value
            checkInUserTypes:[],
            checkInReasons:[],
            checkInTypes:[],
            userList:[],
            dataForm:{
                involvedUserId:'',
                checkInStep:'10',
                userType:'10',
                checkInType:'',
                checkInReason:'',
                takeForUserId:'',
                takeForUserName:'',
                policeId:'',
                policeName:''
            }
        }
    },
    created(){
        this.dataForm.involvedUserId=this.vtp.get("userId");
        this.dataForm.policeId=this.vtp.get("policeId");
        this.dataForm.policeName=this.vtp.get("policeName");
        this.getDicItems("checkInUserType").then(({ data }) => {
            this.checkInUserTypes = data;
        });
        this.getDicItems("checkInReason").then(({ data }) => {
            this.checkInReasons = data;
        });
        this.getDicItems("checkInType").then(({ data }) => {
            this.checkInTypes = data;
        });
    },
    methods:{
        toRouter(o){
            this.vtp.toRouter(this,o);
        },
        selclosePopupFun(){
            this.selzfListState = false;
        },
        selsubmitPopupFun(){
            this.selzfListState = false;
        },
        setUser(id,name){
            this.dataForm.takeForUserId=id;
            this.dataForm.takeForUserName=name;
            this.selsubmitPopupFun();
        },
        showUserList(){
            if(this.dataForm.involvedUserId==''){
                this.$message.error('请先登记人员信息');
                return;
            }
            if(this.dataForm.checkInType==''){
                this.$message.error('请选择入区事由');
                return;
            }
            let type='1'//未出区案犯
            if(this.dataForm.checkInType=='10'){
                type='2'//代领案犯
            }
            this.$http({
                url: this.$http.adornUrl(
                    "/zfuser/zfinvolvedregistration/getUserList"
                ),
                method: "post",
                data: this.$http.adornData({
                    type:type
                })
            }).then(({data})=>{
                this.userList=[];
                if(data&&data.code==0){
                    var list = data.list;
                    if(list){
                        this.getDicItemName(list,'sex','sex','sex')
                        for(var i=0;i<list.length;i++){
                            list[i].avatar=getShowImgPath(list[i].avatar);
                        }
                        this.userList=list;
                    }
                    this.selzfListState=true;
                }
            })
        },
        doSave(){
            if(this.dataForm.checkInType==''){
                this.$message.error('入区事由不能为空');
                return;
            }
            if(this.dataForm.userType=='10'&&this.dataForm.checkInReason==''){
                this.$message.error('涉案案由不能为空');
                return;
            }
            if(this.dataForm.userType=='20'&&this.dataForm.checkInType=='10'&&this.dataForm.takeForUserId==''){
                //临时人员 代领物品
                this.$message.error('关联疑犯不能为空');
                return;
            }
            this.$http({
                url: this.$http.adornUrl(
                    "/zfuser/zfinvolvedregistration/doSaveInvolvedInfo"
                ),
                method: "post",
                data: this.$http.adornData(this.dataForm)
            }).then(({ data }) =>{
                if(data&&data.code==0){
                    this.vtp.set('userInfo',null);
                    this.vtp.set('userId',null);
                    this.toRouter('tjcg')
                }else{
                    this.$message.error("系统异常，提交失败");
                }
            })
        }
    },
    components:{
        zfbaPopupModu
    },
    mounted(){
        this.viewHeight = this.vtp.winHei(166);
        window.onresize = function(){
            let pageHeiVal = tipLayout.winHei()-166;
            $('.sysm-b-modu').height(pageHeiVal);
        }
        let _this=this
        // 下拉框start
        $('body').on('click','.sysm-bmbtable-down input',function(){
            var $p = $(this).parent();
            $(".sysm-bmbtdown-list").css("height","250px").css("overflow","auto");
            $p.addClass('open-down').children('ul').stop(true).slideDown(200)
            // $p.hasClass('open-down') ? $p.removeClass('open-down').children('ul').stop(true).slideUp(200) : $p.addClass('open-down').children('ul').stop(true).slideDown(200);
        });
        $('body').on('click','.sysm-bmbtable-down ul li',function(){
            var val = $(this).html();
            if($(this).parents(".checkInTypeBox").size()>0){
                _this.dataForm.checkInType=$(this).attr("data");
            }
            if($(this).parents(".checkInReasonBox").size()>0){
                _this.dataForm.checkInReason=$(this).attr("data");
            }
            $(this).parents('.sysm-bmbtable-down').children('input').val(val).parent().removeClass('open-down').children('ul').stop(true).slideUp(200);
        });
        $('.sysm-bmbtable-down').mouseleave(function(){
            $(this).removeClass('open-down').children('ul').stop(true).slideUp(200);
        });
        // 下拉框end
    }
}
</script>

<style>

</style>